<template>
	<view class="category-box">
		<view v-for="(item, index) in categoryList.slice(0, 7)" :key="index"
			@click="toPageSearch(categoryList[index].id, categoryList[index].name, index)"
		>
			{{item.name}}
		</view>
		<!-- 全部分类项，点击跳转到搜索页 -->
		<view @click="toPageSearch(null, '全部分类', -1)" >全部分类</view>
	</view>
</template>

<script>

	export default {
		props: {
			categoryList: {
				type: Array,
				default: () => [
					{
						id: 1,    
						name: 'java'  
					},
					{
						id: 2,    
						name: '运维' 
					},
					{
						id: 3,    
						name: 'Python' 
					},
					{
						id: 4,    
						name: 'UI设计'
					},
					{
						id: 5,   
						name: '大数据' 
					},
					{
						id: 6,    
						name: '前端'  
					},
					{
						id: 7,   
						name: 'PHP'  
					},
					{
						id: 8,    
						name: 'VUE'
					},
				]
			}
		},

		methods: {
			// 跳转到搜索页
			toPageSearch(id, name, index) {
				console.log('id', id)  
				const params = {categoryId: id, name: name, activeIndex: index}
				this.navTo(`/pages/search/search?params=${ JSON.stringify(params) }`)
			}
		}
	}

</script>

<style lang="scss">
	// 分类盒子样式
	.category-box {
		display: flex;           // 弹性布局
		justify-content: space-around;  // 子元素均匀分布
		// 不行显示不下，自动换行
		flex-wrap: wrap;         // 换行显示
		// 上 右 下 左
		padding: 20rpx 30rpx 0 30rpx;   // 内边距
		>view {
			width: 160rpx;       // 宽度
			height: 70rpx;       // 高度
			background-color: $mxg-color-grey;  // 背景色
			text-align: center;  // 文本居中
			line-height: 70rpx;  // 行高
			font-size: 26rpx;    // 字体大小
			border-radius: 20rpx; // 圆角
			overflow: hidden;    // 超出隐藏
			margin-top: 15rpx;   // 上外边距
		}
	}
</style>
